import { CloseOutlined } from '#/utils/antdIcons.js';
import TRNotification from '#/utils/notification';
import { useDebounceFn, useSetState } from 'ahooks';
import { Button, ConfigProvider, Modal, Space } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import React, { useEffect } from 'react';
import styles from './index.less';

interface IProps {
  title: string;
  type: string;
  params: Record<string, unknown>;
  rowObj: Record<string, unknown>;
  onPress: (value?: any) => void;
  iconSrc: any;
  hasFooter?: boolean;
  width?: number;
}

const ModalHoc = (WarpComComponent) => {
  return function HOCComponent(props: IProps) {
    const { onPress, title, iconSrc, hasFooter = false, width } = props;
    const [state, setState] = useSetState({
      visible: false,
      loading: false,
      buttonLoading: false,
    });

    useEffect(() => {
      setState({ visible: true });
    }, []);

    const _onCancel = () => {
      setState({ visible: false });
      onPress({ index: 1 });
    };

    const { run } = useDebounceFn(
      () => {
        _onOk();
      },
      {
        wait: 500,
      },
    );

    const _onOk = async () => {
      setState({ visible: false });
    };

    return (
      <Modal
        visible={state.visible}
        centered={true}
        onCancel={_onCancel}
        onOk={_onOk}
        footer={false}
        width={width || 428}
        closable={false}
        maskClosable={false}
        data-modal
        destroyOnClose
        wrapClassName={styles.hocModal}
      >
        <ConfigProvider locale={zhCN}>
          <div className={styles.modalContainer}>
            <div className={styles.modalContent}>
              <header className={styles.header}>
                <div className={styles.header_left}>
                  {iconSrc && <img src={iconSrc} />}
                  <span>{title}</span>
                </div>
                <CloseOutlined onClick={_onCancel} style={{ fontSize: '14px', color: '#ACB1C1' }} />
              </header>
            </div>
            <div className={styles.formContent}>
              <WarpComComponent {...props} handleHideModal={_onCancel} />
            </div>
            {hasFooter ? (
              <footer className={styles.footer}>
                <Space>
                  <Button onClick={_onCancel}>取消</Button>
                  <Button type="primary" onClick={run} loading={state.buttonLoading}>
                    确定
                  </Button>
                </Space>
              </footer>
            ) : null}
          </div>
        </ConfigProvider>
      </Modal>
    );
  };
};

class dModal {
  __key__ = '';
  show = (params = {}, childComponent) => {
    return new Promise(async (resolve) => {
      if (this.__key__.length > 0) this.dismiss();
      this.__key__ = String(Date.now());
      const Child = ModalHoc(childComponent);
      if (params && params.clear) {
        await TRNotification.clear();
      }
      TRNotification.add({
        key: this.__key__,
        dismiss: this.dismiss,
        content: (
          <ConfigProvider locale={zhCN}>
            <Child
              {...params}
              onPress={(result) => {
                TRNotification.remove(this.__key__);
                this.__key__ = '';
                resolve(result);
              }}
            />
          </ConfigProvider>
        ),
      });
    });
  };

  dismiss = (clear) => {
    if (clear) {
      TRNotification.clear();
    } else {
      TRNotification.remove(this.__key__);
    }
    this.__key__ = '';
  };
}

const hocModal = new dModal();
export default hocModal;
